<template>
  <div class="paly" v-if="Init">还没选择歌曲哦</div>
  <div class="paly" v-else style="height: 100%">
    <el-row :gutter="24" style="height: 100%">
      <el-col :span="12" style="height: 100%">
        <div class="grid-content bg-purple" style="height: 100%">
          <div class="leftimg">
            <img :src="leftimg" alt="" />
          </div>
          <div class="topimg">
            <img :src="leftimg" alt="" />
          </div>
          <div class="backimg" ref="rotatepic">
            <img src="../../images/play.png" alt="" />
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple right">
          <h1>{{ music }}</h1>
          <h2>{{ musicer }}</h2>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { MusicUrl, lyr, detail } from "../../api/play";
export default {
  data() {
    return {
      Init: false,
      leftimg: "",
      music: "",
      musicer: "",
      long: "",
      animationplay: "",
      deg: 0,
    };
  },
  computed: {},
  watch: {
    "$store.state.play.playstate": function () {
      if (this.$store.state.play.playstate == 1) {
        this.go();
      } else {
        this.stop();
      }
    },
  },

  methods: {
    async init() {
      // 初始化判断路由是否有id，有则发起请求，无则显示尚未选择歌曲
      if (this.$route.params.id) {
        this.Init = false;
        this.getlyr();
        this.getdetail();
        this.getMusicUrl();
      } else {
        this.Init = true;
      }
    },
    // 获取歌词
    async getMusicUrl() {
      const result = await MusicUrl({ id: this.$route.params.id });
      console.log("播放链接", result);
      this.$store.commit("play/getplayurl", result.data[0].url);
    },
    // 获取播放链接
    async getlyr() {
      const result = await lyr({ id: this.$route.params.id });
      console.log("歌词", result);
    },
    // 获取音乐信息
    async getdetail() {
      const result = await detail({ ids: this.$route.params.id });
      console.log("音乐信息", result);
      this.leftimg = result.songs[0].al.picUrl;
      this.music = result.songs[0].name;
      this.musicer = result.songs[0].ar[0].name;
      this.long = result.songs[0].dt;
      this.$store.commit("play/getsong", result.songs[0].name);
      this.$store.commit("play/getsinger", result.songs[0].ar[0].name);
      this.$store.commit("play/getalltime", result.songs[0].dt);
    },
    //   transform: rotate(90deg);
    go() {
      this.animationplay = setInterval(() => {
        this.deg = this.deg + 100;
        this.$refs.rotatepic.style.transform = `rotate(${this.deg}deg)`;
      }, 1000);
    },
    stop() {
      clearInterval(this.animationplay);
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.leftimg {
  height: 100%;
  filter: blur(5px);
  width: 50%;
}
.leftimg img {
  height: 100%;
}
.topimg {
  position: absolute;
  top: 20%;
  left: 15%;
  border: 1px solid #fff;
  z-index: 3;
}
.topimg img {
  width: 300px;
}
.backimg {
  position: absolute;
  top: 20%;
  left: 25%;
  z-index: 2;
  transition: all 1s linear;
}
.backimg img {
  width: 300px;
}
.right h1 {
  font-size: 28px;
  color: #69b1a2;
}
.right h2 {
  font-size: 20px;
  color: #e79c25;
  margin-top: 10px;
}
</style>
